<template>
  <div class="config-web">
    <el-card>
      <template #header>
        <div class="card-header">
          <h3>网站配置</h3>
        </div>
      </template>

      <el-form :model="configForm" label-width="120px" label-position="left">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item
              label="网站名称"
              prop="web_name"
              :rules="[{ required: true, message: '请输入网站名称', trigger: 'blur' }]"
            >
              <el-input v-model="configForm.web_name" placeholder="请输入网站名称" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item
              label="网站简称"
              prop="web_ename"
              :rules="[{ required: true, message: '请输入网站简称', trigger: 'blur' }]"
            >
              <el-input v-model="configForm.web_ename" placeholder="请输入网站简称" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item
              label="网站URL"
              prop="web_url"
              :rules="[{ required: true, message: '请输入网站URL', trigger: 'blur' }]"
            >
              <el-input v-model="configForm.web_url" placeholder="请输入网站URL" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="网站备案号">
              <el-input v-model="configForm.web_icp" placeholder="请输入网站备案号" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="网站LOGO">
              <el-upload
                class="avatar-uploader"
                action="/index/upload"
                :show-file-list="false"
                :on-success="handleLogoSuccess"
                :before-upload="beforeLogoUpload"
              >
                <img v-if="configForm.web_logo" :src="configForm.web_logo" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="登录背景图">
              <el-upload
                class="avatar-uploader"
                action="/index/upload"
                :show-file-list="false"
                :on-success="handleBgSuccess"
                :before-upload="beforeBgUpload"
              >
                <img v-if="configForm.login_bg" :src="configForm.login_bg" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="联系地址">
              <el-input v-model="configForm.web_address" placeholder="请输入联系地址" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="联系电话">
              <el-input v-model="configForm.web_contact" placeholder="请输入联系电话" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="网站描述">
          <el-input
            v-model="configForm.web_desc"
            type="textarea"
            :rows="4"
            placeholder="请输入网站描述"
          />
        </el-form-item>

        <el-form-item label="SEO关键词">
          <el-input
            v-model="configForm.web_keyword"
            type="textarea"
            :rows="4"
            placeholder="请输入SEO关键词"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm">立即提交</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
  import { reactive, onMounted } from 'vue'
  import { ElMessage } from 'element-plus'
  import axios from '@/utils/request'

  // 表单数据
  const configForm = reactive({
    id: 0,
    web_name: '',
    web_ename: '',
    web_url: '',
    web_icp: '',
    web_logo: '',
    login_bg: '',
    web_address: '',
    web_contact: '',
    web_desc: '',
    web_keyword: '',
  })

  // 获取网站配置
  const getWebConfig = async () => {
    try {
      const response = await axios.get('/home/conf/web')

      if (response.data?.code === 0) {
        Object.assign(configForm, response.data.data)
      } else {
        ElMessage.error(response.data?.msg || '获取网站配置失败')
      }
    } catch (error) {
      ElMessage.error('获取网站配置失败')
    }
  }

  // 处理LOGO上传成功
  const handleLogoSuccess = (response: any) => {
    if (response.data?.code === 0) {
      configForm.web_logo = response.data.data.url
      ElMessage.success('上传成功')
    } else {
      ElMessage.error(response.data?.msg || '上传失败')
    }
  }

  // 处理背景图上传成功
  const handleBgSuccess = (response: any) => {
    if (response.code === 0) {
      configForm.login_bg = response.data.url
      ElMessage.success('上传成功')
    } else {
      ElMessage.error(response.msg || '上传失败')
    }
  }

  // 上传前检查
  const beforeLogoUpload = (file: File) => {
    const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
    const isLt2M = file.size / 1024 / 1024 < 2

    if (!isJPG) {
      ElMessage.error('上传头像图片只能是 JPG/PNG 格式!')
    }
    if (!isLt2M) {
      ElMessage.error('上传头像图片大小不能超过 2MB!')
    }
    return isJPG && isLt2M
  }

  // 上传前检查
  const beforeBgUpload = (file: File) => {
    const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
    const isLt2M = file.size / 1024 / 1024 < 2

    if (!isJPG) {
      ElMessage.error('上传图片只能是 JPG/PNG 格式!')
    }
    if (!isLt2M) {
      ElMessage.error('上传图片大小不能超过 2MB!')
    }
    return isJPG && isLt2M
  }

  // 提交表单
  const submitForm = async () => {
    try {
      const response = await axios.post('/home/conf/edit', configForm)

      if (response.data?.code === 0) {
        ElMessage.success('保存成功')
      } else {
        ElMessage.error(response.data?.msg || '保存失败')
      }
    } catch (error) {
      ElMessage.error('保存失败')
    }
  }

  // 重置表单
  const resetForm = () => {
    getWebConfig()
  }

  // 初始化
  onMounted(() => {
    getWebConfig()
  })
</script>

<style scoped>
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }

  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }

  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
  }
</style>
